<template>
  <div id="app" ref="myApp">
    <mark id="errMark">服务器响应异常，请稍后再试</mark>
    <div :class="{ layoutShow: isLogin }">
      <vHeader></vHeader>
      <div class="nav" ref="myNav">
        <vNav></vNav>
      </div>
    </div>
    <div class="content" ref="myContent" :class="{ layoutStyle: isLogin }">
      <div class="shrink" @mouseover="showShrink" @mouseout="hideShrink">
        <div ref="shrinkBg" id="shrink__bg" class="shrink__bg" @click="shrinkCtrl">
          <i v-if="showNav" class="el-icon-arrow-left"></i>
          <i v-else class="el-icon-arrow-right"></i>
        </div>
      </div>
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
  import vHeader from './components/common/header'
  import vNav from './components/common/nav'

  import {setStore, getStore} from '@/assets/js/common'

  export default {
    name: 'app',
    data() {
      return {
        isLogin: true,
        showNav: true
      }
    },
    created() {
      if(!getStore('userMsg')){
        this.isLogin = true
        this.$router.push('/login')
      } else{
        this.isLogin = false;

        let hrefUrl = location.href;
        if(hrefUrl.indexOf('login') != -1) {
          this.$router.push('/home')
        }
      }

      this.$store.commit("businessform/SAVE_INITIAL_DATA");
      this.$store.commit("buyertotcf/SAVE_INITIAL_DATA");
      this.$store.commit("tcftofactory/SAVE_INITIAL_DATA");
      this.$store.commit("tcflefttofactory/SAVE_INITIAL_DATA");
      this.$store.commit("documentprocess/SAVE_INITIAL_DATA");
      this.$store.commit("buyerlefttotcf/SAVE_INITIAL_DATA");

    },
    mounted () {
      this.init();

      if(!getStore('userMsg')){
        this.$refs.shrinkBg.style.zIndex =  "-10";
      } else {
         this.$refs.shrinkBg.style.zIndex =  "10";
      }
      const that = this
      window.onresize = () => {
        return (() => {
            that.init();
        })()
      }
    },
    methods:{
      init() {

        const dH = document.documentElement.clientHeight - 10;
        this.$refs.myApp.style.height = dH + 'px';
        this.$refs.myContent.style.minHeight = (dH-90) + 'px';
        this.$refs.myNav.style.minHeight = (dH-90) + 'px';
      },
      showShrink(event){
        // this.$refs.shrinkBg.style.zIndex = 10;
        // this.$refs.shrinkBg.style.opacity = 1;
      },
      hideShrink(event){
        // this.$refs.shrinkBg.style.zIndex = -10;
        // this.$refs.shrinkBg.style.opacity = 0;
      },
      shrinkCtrl(event){
        this.showNav = !this.showNav;
        if (this.showNav){
          this.$refs.myNav.style.display = "block";
          this.$refs.myContent.style.marginLeft = "190px";
         this.$refs.shrinkBg.style.left = "190px";
        } else {
          this.$refs.myNav.style.display = "none";
          this.$refs.myContent.style.marginLeft = "0px";
         this.$refs.shrinkBg.style.left = "0px";
        }
      }
    },
    watch: {
      $route (data, oldData) {
        // console.log(data, oldData);

        if(data.name == 'login'){
          this.isLogin = true
        }else{
          this.isLogin = false
        }
      }

    },
    components: {
      vHeader, vNav
    }
  }
</script>

<style lang="sass">
  @import './assets/css/reset.sass'
  @import './assets/css/common.sass'

  #app
    // font-family: 'Avenir', Helvetica, Arial, sans-serif
    // -webkit-font-smoothing: antialiased
    // -moz-osx-font-smoothing: grayscale
    position: relative
    #errMark
      position: fixed
      top: 22px
      left: 50%
      font-size: 16px
      padding: 10px 20px
      background: #f5f7fa
      border-radius: 4px
      color: #fa5555
      transform: translateX(-50%)
      text-align: center
      z-index: 11
      display: none
    .layoutShow
      display: none
    .layoutStyle
        margin: 0 !important
        height: 100%
        top: 0 !important
    .nav
      position: absolute
      background: #fff
      left: 0
    .content
      // height: 100%
      margin-left: 190px
      margin-bottom: 10px
      min-height: 620px
      background: #fff
      position: relative
      top: 90px
      padding-left: 30px
      .el-breadcrumb
        margin-bottom: 20px

      .shrink
        position: absolute
        left: 0;
        top: 0
        bottom: 0
        width: 100px
        .shrink__bg
          z-index: -10
          opacity: 1
          cursor: pointer
          position: fixed 
          left: 190px
          top: 40%
          width: 30px
          height: 60px
          background: #909399
          border-radius: 0 60px  60px 0
          >i
             font-size: 24px
             color: #fff
             position: absolute
             left: 0
             top: 50%
             transform: translateY(-50%)


</style>
